第 3 步 - 切换模糊效果

这一步中，您首先添加显示含有开门警告的弹出窗口的页面 (Page) 节点。然后创建用于切换模糊效果和弹出窗口的切换按钮 (Toggle Button) 节点，以便在警告可见时，警告后的汽车 (car) 节点变模糊。

创建开门警告

在本节中，您将创建包含开门警告的页面 (Page) 节点。然后设置页面迁移，以便在应用程序导航至该警告页面 (Page) 节点时，警告淡入视图。

要创建开门警告：

在工程 (Project) 中按下 Alt 并右键点击RootPage 节点，选择页面 (Page)，将其命名为 Warning，并在其中创建图像 (Image) 节点。
在工程 (Project) 中选择图像 (Image) 节点并在属性 (Properties) 中添加和设置：
- 图像 (Image) 为DoorWarning
- 水平对齐 (Horizontal Alignment) 为居中 (Center)
- 垂直对齐 (Vertical Alignment) 为居中 (Center)
在属性 (Properties) 中，添加绑定 (Bindings) 属性并在绑定参数编辑器 (Binding Argument Editor) 中设置：
- 属性 (Property) 为布局宽度 (Layout Width)
- 表达式 (Expression) 为
```
{@../Node.ActualWidth}*0.6
```
将图像 (Image) 节点宽度设置为其父节点宽度的 60%。
创建在切换开门警告时使用的页面迁移：
1. 在页面 (Pages) 中点击迁移 (Transitions) 以显示迁移 (Transitions) 编辑器。
2. 在默认迁移 (Default Transition) 的迁移 (Transitions) 编辑器中，点击删除默认迁移。
3. 在迁移 (Transitions) 编辑器中，从迁移预设 (Transition Presets) 拖动淡出 (Fade) 迁移，并将其放在默认迁移 (Default Transitions) 窗格中。
4. 在淡出 (Fade) 迁移中，点击并将持续期间 (Duration) 属性设置为 200。
5. 要在预览 (Preview) 中查看迁移，在页面 (Pages) 中点击Warning 节点，然后是RootPage 节点。

切换模糊效果和开门警告

在本节中，您将创建用于切换模糊效果和开门警告的切换按钮 (Toggle Button) 节点，以便在您点击该应用程序窗口任意位置时，出现警告并且 Kanzi 应用模糊效果到警告后的汽车 (Car) 节点。

要切换模糊效果和开门警告：

在工程 (Project) 中按下 Alt 并右键点击RootPage 节点，选择 2D 切换按钮 (Toggle button 2D) 并将其命名为 Toggle Warning。
在工程 (Project) 中将汽车 (Car) 节点拖到Toggle Warning 节点。
这样可将Toggle Warning 节点的尺寸设置为与汽车 (Car) 节点相同。
在工程 (Project) 中将Toggle Warning 节点拖到Warning 节点上方。
这样即可在汽车 (Car) 节点之前显示Warning 节点。
配置切换按钮：
1. 在工程 (Project) 中选择Toggle Warning 节点并在状态工具 (State Tools) 中点击创建状态机 (Create State Manager)。
  Kanzi Studio 创建状态机，并将其分配到Toggle Warning 节点。
2. 在状态工具 (State Tools) 中点击两次创建状态 (Create State) 创建两个状态，双击每个状态的名称，然后重命名状态为Off 和On。
  使用Off 状态定义Toggle Warning 切换按钮关闭时应用程序的状态，以及切换按钮打开时On 的状态。
3. 定义Off 状态：
  1. 在工程 (Project) 中选择汽车 (Car) 节点，在属性 (Properties) 中添加渲染通道 (Render Pass) 属性，将其设为 DefaultRenderPass。
    在这里设置 Kanzi 渲染汽车 (Car) 节点，以使内容不会模糊。
  2. 在节点组件 (Node Components) > 触发器 (Triggers) 部分右键点击，选择添加触发器 (Add Trigger) > 常规 (General) > 附加时 (On Attached)，在附加时 (On Attached) 触发器中点击添加 (Add) 下拉菜单，选择导航至页面 (Navigate to Page) 动作，在该动作设置中将项 (Item) 属性设置为屏幕 (Screens)/屏幕 (Screen)/RootPage 设置。
    在这里设置应用程序以导航到RootPage 节点。
  3. 在Off 状态的状态工具 (State Tools) 中，点击将渲染通道 (Render Pass) 属性的当前值和附加时 (On Attached) 触发器保存在该状态的Car 节点中。
    设置 Kanzi 渲染汽车 (Car) 节点，以使用内容不会模糊，并且在Toggle Warning 按钮在Off 状态时不显示开门警告。
4. 定义On 状态：
  1. 在属性 (Properties) 中，将渲染通道 (Render Pass) 属性设置为Gaussian Blur 渲染通道。
    在这里设置 Kanzi 使用本教程上一步中创建的渲染通道渲染汽车 (Car) 节点，以使内容模糊。
  2. 在附加时 (On Attached) 触发器的节点组件 (Node Components) 中，点击导航至页面 (Navigate to Page) 动作并在该动作设置中将项 (Item) 属性设置为屏幕 (Screens)/屏幕 (Screen)/RootPage/Warning 节点。
    在这里设置应用程序以导航到Warning 节点。
  3. 在On 状态的状态工具 (State Tools) 中，点击将渲染通道 (Render Pass) 属性的当前值和附加时 (On Attached) 触发器保存到该状态。
    设置 Kanzi 渲染模糊的汽车 (Car) 节点，并且在Toggle Warning 按钮在On 状态时显示开门警告。
5. 在状态工具 (State Tools) 中点击<No Controller Property> 下拉菜单并选择按钮 (Button) > 切换状态 (Toggle State)属性。
  在状态机中，您为控制器属性 (Controller Property) 选择的属性值定义状态组中的各个状态处于活动状态时的条件。
6. 在状态工具 (State Tools) 中，为每个状态设置控制器属性的值。
  - 对于On 状态，将该值设为 1。
  - 对于Off 状态，仍将该值设为 0。
7. 在状态工具 (State Tools) 中点击任何 -> 任何 (Any -> Any)，并在状态迁移编辑器 (State Transition Editor) 中将持续期间 (Duration) 属性设置为 0。
  这样即可设置状态之间即时迁移。
8. 在状态工具 (State Tools) 中点击编辑状态机 (Edit State Manager) 停用状态工具 (State Tools)。
在预览 (Preview) 中点击进入交互 (Interact) 模式。点击预览 (Preview) 窗口中的任意位置，可在Toggle Warning 节点中创建的状态机中定义的Off 和On 状态之间切换：
- 在 Off 状态中，Kanzi 使用默认渲染通道渲染汽车 (Car) 节点。
- 在On 状态中，Kanzi 模糊汽车 (Car) 节点并显示开门警告。
Your browser does not support the video tag.